<!--
 * @Description: nbd developer
 * @Author: wukai
 * @CompanyWebsite: nbd.com.cn
 * @since: 2020-11-19 10:22:48
 * @LastAuthor: wukai
 * @lastTime: 2020-11-19 17:49:45
-->
<template>
    <div>
        <div class="showTitles">
            <div class="t1">排名</div>
            <div class="t2">医院名称</div>
            <div class="t3">声誉权重</div>
            <div class="t3">科研权重</div>
            <div class="t3">总分</div>
        </div>
        <div v-for="(item, index) in selectList" :key="index">
            <div
                class="showTitles itemShow"
                :class="index < selectList.length - 1 ? 'imtemSHow1' : ''"
            >
                <div class="t1 t33">{{ item.排名 }}</div>
                <div class="t2">{{ item.医院名称 }}</div>
                <div class="t3 t33">{{ item.声誉权重 }}</div>
                <div class="t3 t33">{{ item.科研权重 }}</div>
                <div class="t3">{{ item.总分 }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
    @Prop() private selectList!: any;
}
</script>

<style lang="scss" scoped>
.showTitles {
    width: 669px;
    height: 38px;
    background: #8cd2fa;
    font-size: 22px;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
    text-align: center;
}
.itemShow {
    height: 72px;
    padding: 9px 0;
    background: #fff;
    color: #4f4f4f;
}
.imtemSHow1 {
    border-bottom: 1px solid #d2d2d2;
}
.t1 {
    margin-left: 5px;
    width: 57px;
}
.t2 {
    width: 264px;
}
.t3 {
    width: 100px;
    margin-left: 20px;
}
.t33 {
    font-weight: 400;
}
</style>
